---
title: BotãoConectar
description: Usando e customizando o BotãoConectar
---

# BotãoConectar

## Usando e customizando o BotãoConectar

Este é o componente principal. Ele é responsável por renderizar o botão de conectar/desconectar, bem como a interface de troca de cadeias.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

> Nota: Certifique-se de que seu aplicativo está envolto nos provedores necessários. [Saiba mais](/docs/installation#wrap-providers).

### Propriedades

O componente `BotãoConectar` expõe várias propriedades para customizar sua aparência, incluindo a alternância da visibilidade de diferentes elementos.

<PropsTable
  data={[
    {
      name: 'label',
      required: false,
      default: 'Conectar Carteira',
      type: 'string',
      description: 'O texto da etiqueta exibida no BotãoConectar',
    },
    {
      name: 'accountStatus',
      required: false,
      default: 'full',
      type: '"avatar" | "address" | "full" | { smallScreen: AccountStatus, largeScreen?: AccountStatus }',
      typeSimple: 'enum',
      description:
        "Se o avatar e/ou o endereço da conta ativa são exibidos",
    },
    {
      name: 'chainStatus',
      required: false,
      default: '{ smallScreen: "icon", largeScreen: "full" }',
      type: '"icon" | "name" | "full" | "none" | { smallScreen: ChainStatus, largeScreen?: ChainStatus }',
      typeSimple: 'enum',
      description:
        "Se o ícone e/ou nome da cadeia atual são exibidos, ou totalmente escondidos",
    },
    {
      name: 'showBalance',
      required: false,
      default: '{ smallScreen: false, largeScreen: true }',
      type: 'boolean | { smallScreen: boolean, largeScreen?: boolean }',
      typeSimple: 'enum',
      description:
        'Se o saldo é visível ao lado do nome da conta',
    },
  ]}
/>

> Nota: o breakpoint embutido para `grandeTela` é `768px`.

### Exemplos

#### Etiqueta

Use a propriedade `label` para definir um texto personalizado para o `BotãoConectar`.

```tsx
<ConnectButton label="__Sign in__" />
```

#### Status da conta

Aqui estão algumas maneiras diferentes de usar a propriedade `statusConta`.

Mostrar apenas o avatar da conta.

```tsx
<ConnectButton accountStatus="__avatar__" />
```

Mostrar apenas o endereço da conta.

```tsx
<ConnectButton accountStatus="__address__" />
```

#### Status da cadeia

Aqui estão algumas maneiras diferentes de usar a propriedade `statusCadeia`.

Mostrar apenas o ícone da cadeia atual.

```tsx
<ConnectButton chainStatus="__icon__" />
```

Mostrar apenas o nome da cadeia atual.

```tsx
<ConnectButton chainStatus="__name__" />
```

Ocultar totalmente a interface da cadeia.

```tsx
<ConnectButton chainStatus="__none__" />
```

#### Mostrar saldo

Use a propriedade `mostrarSaldo` para esconder/mostrar o saldo.

Esconder o saldo.

```tsx
<ConnectButton showBalance={__false__} />
```

#### Responsivo

Essas propriedades também podem ser definidas em um formato responsivo.

Em telas pequenas, mostrar apenas o ícone da conta. Mas em telas grandes, mostrar ícone e endereço.

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

Em telas pequenas, esconder o saldo. Mas em telas grandes, mostrá-lo.

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```
